<template>
  <div class="main">
    <div class="device">
      <div @click="toMain" class="dmid">
        <van-empty description="暂无分组" v-if="!name" />
      </div>
    </div>
  </div>
</template>

<script>
//import { Dialog } from 'vant';
import { Toast } from "vant";
export default {
  //name: "Lab-1",
  props: {
    name: String,
  },
  components: {},
  created: function () {
    console.log(this.pub);
    this.initInterface();
    this.mqttMsg();
  },
  data() {
    return {
      deviceData: {
        ID: this.id,
        name: this.name,
      },
      resData: [],
      iData: [],
      cData: [],
    };
  },
  computed: {
    infoData: function () {
      return this.iData.filter(function (iDatas) {
        return iDatas.view.banner; //返回isShow=true的项，添加到activeUsers数组
      });
    },
    chartData: function () {
      return this.iData.filter(function (iDatas) {
        return iDatas.view.chart; //返回isShow=true的项，添加到activeUsers数组
      });
    },
  },
  methods: {
    initInterface() {
      this.$http
        .get("http://121.5.58.100:8000/queryDeviceInterface", {
          params: {
            deviceid: this.id,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((result) => {
          console.log(result.data);
          this.resData = result.data;
          this.iData = [];
          this.cData = [];
          for (let i = 0; i < result.data.length; i++) {
            this.iData.push(result.data[i]);
            if (result.data[i].view.chart) {
              this.cData.push({
                date: [],
                data: [],
              });
            }
          }
          console.log(this.cData);
        });
    },
    formatDate(params) {
      let date = params;
      let formatStr = "HH:mm:ss";
      // 传入日期字符串 - 转成时间戳 - 转成标准时间
      let timeStamp = params.getTime();
      console.log(timeStamp);
      date = new Date(timeStamp);
      formatStr = formatStr.replace(
        new RegExp("yyyy"),
        `${date.getFullYear()}`
      );
      const month = date.getMonth() + 1;
      formatStr = formatStr.replace(
        new RegExp("MM"),
        `${month > 9 ? month : "0" + month}`
      );
      const day = date.getDate();
      formatStr = formatStr.replace(
        new RegExp("dd"),
        `${day > 9 ? day : "0" + day}`
      );
      const hour = date.getHours();
      formatStr = formatStr.replace(
        new RegExp("HH"),
        `${hour > 9 ? hour : "0" + hour}`
      );
      const min = date.getMinutes();
      formatStr = formatStr.replace(
        new RegExp("mm"),
        `${min > 9 ? min : "0" + min}`
      );
      const sec = date.getSeconds();
      formatStr = formatStr.replace(
        new RegExp("ss"),
        `${sec > 9 ? sec : "0" + sec}`
      );
      return formatStr;
    },
    onControlChange(item) {
      navigator.vibrate(100);
      console.log(item);

      // console.log(this.iData[index]);

      // var info = this.iData[index];
      this.$set(item, "load", true);
      // //this.$mqttcontrol.digitalWrite(info,this.sub)

      var send = {};
      send[item.identifier] = item.content === true ? "1" : "0";
      console.log(send);
      this.$mqtt.publish(this.sub, send);
    },
    toMain() {
      this.$router.push({
        name: "interface_page_index",
        params: {
          id: this.id,
          name: this.name,
          pub: this.pub,
          sub: this.sub,
          resData: this.resData,
          cData: this.cData,
          routerType: "push",
        },
      });
    },
    mqttMsg() {
      // 接收消息处理
      this.$mqtt.message(this.pub, (topic, message) => {
        console.log(message.toString()); //控制台显示接收到的数据
        this.data = message.toString();
        try {
          this.res = JSON.parse(message.toString());
          for (let i = 0; i < this.chartData.length; i++) {
            var info = this.chartData[i];
            this.cData[i].date.push(this.formatDate(new Date()));
            this.cData[i].data.push(this.res[info.identifier]);
            //this.$forceUpdate();
          }
          console.log(this.cData);
          for (let i = 0; i < this.iData.length; i++) {
            var info = this.iData[i];
            if (info.specs.type === "analog") {
              this.res[info.identifier] = this.res[info.identifier].toFixed(
                info.specs.fixed
              );
            }
            if ((info.accessMode === "rw") & (info.specs.type === "digital")) {
              if (info.load) {
                console.log(info.content);
                console.log(this.res[info.identifier] === 1 ? true : false);
                if (
                  info.content ===
                  (this.res[info.identifier] === 1 ? true : false)
                ) {
                  Toast.success("设定成功");
                  info.load = false;
                } else {
                  Toast.fail("发生错误");
                  info.load = false;
                }
              } else {
                this.res[info.identifier] =
                  this.res[info.identifier] === 1 ? true : false;
                this.$set(info, "content", this.res[info.identifier]);
                console.log("control", this.res[info.identifier]);
              }
            } else if (
              (info.accessMode === "rw") &
              (info.specs.type === "analog")
            ) {
              if (info.load) {
                if (info.content == this.res[info.identifier]) {
                  Toast.success("设定成功");
                  info.load = false;
                } else {
                  Toast.fail("发生错误");
                  info.load = false;
                }
              } else {
                this.$set(info, "content", this.res[info.identifier]);
                console.log("set", this.res[info.identifier]);
              }
            } else {
              this.$set(info, "content", this.res[info.identifier]);
            }
            //info.content = this.res[info.identifier];

            //this.$forceUpdate();
            console.log(info);
          }
        } catch (err) {
          console.log(err.message);
        }
      });
    },
  },
};
</script>
<style scoped>
.content {
  padding: 10px 16px;
}
.main {
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px 20px 10px 20px;
}
.device {
  position: relative;
  z-index: 1;
  width: 85vw;
  height: auto;
  display: flex;
  justify-content: left;
  align-items: center;
  border-radius: 20px;
  text-align: left;
  padding: 10px 10px;
  box-shadow: 0px 0px 12px 0 rgb(0 0 0 / 8%);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
}
/* .device:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
    background-color: rgba(255,255,255,0.8);
    z-index: -1;
} */
.dleft {
  flex: 0 0 20vw;
  width: 50px;
  text-align: center;
  order: -1; /* 让 #left 居于左侧 */
}
.dmid {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  font-size: 4vw;
}
.dright {
  flex: 0 0 20vw;
  text-align: center;
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
